<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页内容页</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/swiper.min.css">
    <link rel="stylesheet" href="../../../css/common.css">
	<script src="../../../script/swiper.min.js" type="text/javascript"></script>
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        body{
            background:#FFF;
        }
        #container{
            padding-top:0.17rem;
        }
        .small_banner{
            margin-top:0.3rem;
        }
        .small_banner img{
            display: block;
            border-radius:0.12rem;
            float:left;
            width:calc((100% - 0.3rem) / 2);
        }
        .small_banner img:nth-child(1){
            margin-right:0.3rem;
        }
        .headlines{
            margin-top:0.3rem;
        }
        .headlines .line{
            display: block;
            width:100%;
        }
        .headlines .backBg{
            padding:0.05rem 0 0 0.3rem!important;
            animation:none!important;
        }
        .headlines .backBg span{
            display: block;
            background:#F6F6F6;
            height:0.4rem;
        }
        .headlines .backBg span:nth-child(2){
            margin-top:0.2rem;
        }
        .headlines .headline-content{
            margin:0.3rem 0px;
            overflow:hidden;
            height:1.1rem;
        }
        .headlines .headline-content img{
            float:left;
            width:1.6rem;
            height:1.12rem;
        }
        .headlines .headline-content>div{
            padding-left:0.3rem;
            width:calc(100% - 1.6rem);
            float:left;
            -webkit-animation: message-data 25s linear infinite;
            animation: message-data 25s linear infinite;
        }
        .headlines .headline-content>div div{
            font-size:0.27rem;
            height:calc(1.12rem / 2);
            line-height:calc(1.12rem / 2);
            color:#979797;
        }
        @-webkit-keyframes message-data{
            0%,8.5%,to {transform: translateZ(0)}
            10%,18.5% {transform: translate3d(0, -10%, 0)}
            20%,28.5% {transform: translate3d(0, -20%, 0)}
            30%,38.5% {transform: translate3d(0, -30%, 0)}
            40%,48.5% {transform: translate3d(0, -40%, 0)}
            50%,58.5% {transform: translate3d(0, -50%, 0)}
            60%,68.5% {transform: translate3d(0, -60%, 0)}
            70%,78.5% {transform: translate3d(0, -70%, 0)}
            80%,88.5% {transform: translate3d(0, -80%, 0)}
            90%,99.9999% {transform: translate3d(0, -90%, 0)}
        }
        @keyframes message-data{0%,
            8.5%,to {transform: translateZ(0)}
            10%,18.5% {transform: translate3d(0, -10%, 0)}
            20%,28.5% {transform: translate3d(0, -20%, 0)}
            30%,38.5% {transform: translate3d(0, -30%, 0)}
            40%,48.5% {transform: translate3d(0, -40%, 0)}
            50%,58.5% {transform: translate3d(0, -50%, 0)}
            60%,68.5% {transform: translate3d(0, -60%, 0)}
            70%,78.5% {transform: translate3d(0, -70%, 0)}
            80%,88.5% {transform: translate3d(0, -80%, 0)}
            90%,99.9999% {transform: translate3d(0, -90%, 0)}
        }
        .m-sort{
            display: -webkit-box;
            overflow-x: auto;
            -webkit-overflow-scrolling:touch;
            line-height: .9rem;
            color:#333;
            margin-top:0.15rem;
        }
        .m-sort .u-wrap{
            font-size:0.29rem;
            margin-right:0.7rem;
        }
        .m-sort .activeWrap{
            font-size: .31rem;
            font-weight: bold;
            position: relative;
        }
        .m-sort .activeWrap ._dashed{
            position:absolute;
            bottom:0;
            left:0;
            width: 100%;
            height:0.07rem;
        }
        .m-sort .activeWrap ._lined{
            width: 40%;
            margin: 0 auto;
            height: 100%;
            border-radius: 1rem;
            background:#FFAC5E;
        }
        .m-sort::-webkit-scrollbar {
            display: none;
        }
        .se-loading{
            top:45%;
        }
        .swiper-slide img{
            width:100%;
            height:3.1rem;
            display: block;
            object-fit: contain;
            border-radius:0.12rem;
        }
        .swiper-pagination-bullet{
            height:5px;
            width:5px;
            background:#FFF;
            opacity: 0.6;
            border-radius:10px;
        }
        .swiper-pagination-bullet-active {
            opacity: 1;
            width:13px;
        }
        .updateNotice{
            background:#fffaf3;
            color:#f6a533;
            padding:0.13rem 0.3rem;
            font-size:0.26rem;
            border-radius:0.08rem;
            margin-bottom:0.16rem;
            text-align:center;
        }
		/*
		.gender{
			margin-top:0.45rem;
			margin-bottom:0.2rem;
		}
		.gender>div{
			float:left;
			width:25%;
			text-align:center;
			line-height:calc(0.61rem - 2px);
			height:0.61rem;
			border:1px solid #ff8048;
			color:#ff8048;
			font-size:0.27rem;
		}
		.gender>div.active{
			background:#ff8048;
			color:#FFF;
		}
		.gender>div:nth-child(1){
			border-radius:0.06rem 0 0 0.06rem;
			border-right:0;
		}
		.gender>div:nth-child(2){
			border-right:0;
		}
		.gender>div:nth-child(3){
			border-right:0;
		}
		.gender>div:nth-child(4){ 
			border-radius:0 0.06rem 0.06rem 0;
		}
		*/
	   .gender{
	   	margin-top:0.45rem;
	   	margin-bottom:0.2rem;
	   }
	   .gender>div{
	   	float:left;
	   	width:calc((100% - 0.9rem) / 4);
	   	text-align:center;
	   	line-height:calc(0.55rem);
	   	height:0.55rem;
	   	font-size:0.26rem;
		background:#F9F9F9;
		color:#9c9c9c;
		margin-right:0.3rem;
		border-radius:0.13rem;
	   }
	   .gender>div:nth-last-child(1){
		   margin-right:0;
	   }
	   .gender>div.active{
		   color:#ff8048;
		   background:#fff7f3;
	   }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div id="container">
            <div v-if="basicInfo==null" class="loadFull">
                <div class="se-loading"></div>
            </div>
            <template v-else>
                <div class="updateNotice" v-if="updateResult" @click="showUpdate()">亲，平台已更新，请赶快下载更新吧！</div>
				<template v-if="iosTest==false">
					<div class="swiper-container">
					    <div class="swiper-wrapper">
					        <div class="swiper-slide"><img src="../../../image/home/banner.jpg" /></div>
					    </div>
					    <div class="swiper-pagination"></div>
					</div>
					<div class="headlines">
						<img src="../../../image/home/color1.png" class="line" />
						<div class="clearfix headline-content">
							<img src="../../../image/home/headlines.png" />
							<div v-if="basicInfo && basicInfo.cash_log.length > 0">
								<div class="ell" v-for="item in basicInfo.cash_log">{{item.user_name}}刚刚提现{{$.parsePrice(item.pay)}}元</div>
							</div>
							<div class="backBg" v-else>
								<span></span>
								<span></span>
							</div>
						</div>
						<img src="../../../image/home/color2.png" class="line" />
					</div>

					<div class="small_banner clearfix">
					    <img src="../../../image/home/small_banner1.png" @click="$.openUrl('common/commonTitle','my/everyDay',{title:'每日奖励'})" />
					    <img src="../../../image/home/small_banner2.png" @click="$.openUrl('invite/index','invite/index',{title:'邀请赚钱'})" />
					</div>
				</template>
                <div class="indexTask">
					<div class="gender clearfix">
						<div @click="changeDiffcultyLevel(0)" :class="{active: diffcultyLevel == 0}">所有</div>
						<div @click="changeDiffcultyLevel(1)" :class="{active: diffcultyLevel == 1}">初级</div>
						<div @click="changeDiffcultyLevel(2)" :class="{active: diffcultyLevel == 2}">中级</div>
						<div @click="changeDiffcultyLevel(3)" :class="{active: diffcultyLevel == 3}">高级</div>
					</div>
                    <template v-if="list !== null">
                        <template v-if="list.length>0">
                            <ul class="task">
                                <li v-for="(item,index) in list" :key="index" class="clearfix" :class="item.is_able_accept?'':'whiteBg'"
                                    @click="navTaskDetail(item.id)"
                                >
                                    <div class="icon">
                                        <img :src="item.platform?item.platform.icon:''" class="icon" />
                                    </div>
                                    <div class="info">
                                        <div class="task_title disbox">
                                            <h3 class="disflex ell">{{item.title}}</h3>
                                            <b>+{{$.parsePrice(item.amount_actual)}}</b>
                                        </div>
                                        <div class="tags">
                                          <div class="li">{{item.platform?item.platform.name:'' }}{{item.project?item.project.name:''}}</div>
										  <div class="li" v-if="item.diffculty_level">{{item.diffculty_level | getDiffcultyLevelName}}</div>
                                          <!--div class="grade"><img src="../../../image/my/v3.png" />Lv3以上可接</div-->
                                        </div>
                                    </div>
                                    <span v-if="item.is_top" class="top">顶</span>
                                    <div class="progress">
                                        <i class="over" :style="{width:(item.total_accepts-item.total_surplus_accepts)/item.total_accepts*100+'%' }" ></i>
                                    </div>
                                </li>
                            </ul>
                            <div class="loadText">
                                <div class="weui-loadmore" v-if="has_more">
                                    <i class="weui-loading"></i>
                                    <span class="weui-loadmore__tips">正在加载</span>
                                </div>
                                <span v-else class="over">我已经到底啦！</span>
                            </div>
                        </template>
                        <template v-else>
                            <section class="m-no">
                                <div class="u-img"></div>
                                <div class="u-spec">暂无数据</div>
                            </section>
                        </template>
                    </template>
                    <template v-else>
                        <div class="minHeightFull" v-if="load">
                            <div class="loadLayer"><span></span> <span></span> <span></span> <span></span> <span></span></div>
                        </div>
                    </template>
                </div>
            </template>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            //为了避免每次启动APP时筛选条件都是上次的，所以这里设置筛选条件默认值
            $.prefs.setItem('sortIndex','0');
            $.prefs.setItem('canAccept','false');
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
					updateResult:null,
                    basicInfo:null,
                    diffcultyLevel: 0,
                    first:true,

                    page: 1,//当前页数
                    has_more: true,//是否还有更多
                    jfm: false,//只展示当前等级能接的任务
                    sort: 'default',//排序方式
                    categoryId: 0, // 平台分类id
                    list: null,//列表
                    load: true,//是否展示列表的加载
                    loading: false,//是否当前处于加载中，如果本身处于加载中就不在加载了
                },
                filters: {
                    getDiffcultyLevelName: function(lv){
                        return ['', '初级', '中级', '高级'][~~lv];
                    },
                },
                created: function(){
                    $.prefs.removeItem('categorys');
                    $.prefs.setItem('categoryId', 0);
                },
                methods:{
                    changeDiffcultyLevel: function(lv){
                        this.diffcultyLevel = lv;
                        this.list = null;
                        this.load = true;
                        this.resetPageParam();
                    },
                    makeCategoryData: function(data){
                        var list = [];
                        for(var i=0; i<data.length; i++){
                            list.push({
                                id: data[i].id,
                                name: data[i].name
                            });
                        }
                        $.prefs.setItem('categorys', JSON.stringify(list));
                        return list;
                    },
                    getBasicInfo(noNotice){
                        var that = this;
                        $.ajax({
                            url:"/recent/tran/log",
                            success:function(res){
                                that.basicInfo = res.data;
                                that.makeCategoryData(res.data.projects.data.platforms)
                                //初始化插件
								that.$nextTick(function(){
									var mySwiper = new Swiper('.swiper-container', {
										bserver: true, //修改swiper自己或子元素时，自动初始化swiper
										observeParents: true, //修改swiper的父元素时，自动初始化swiper
									    autoplay: {
									        delay:6000
									    },
									    pagination: {
									        el: '.swiper-pagination',
									    },
									})
								})

								if(res.data.is_able_lottery==1 && that.iosTest==false){
									$.openLucyIcon();
								}else{
									api.closeFrame({
										name:"luckIcon"
									});
								}
								
								if((res.data.indexLayer!="") && ($.prefs.getItem("notice") != md5(res.data.indexLayer)) && (noNotice!=true)){
									var frames = api.frames();
									if(JSON.stringify(frames).indexOf("updateLayer")==-1){
										$.openNotice(res.data.indexLayer);
									}
								}
                            }
                        });
                    },
					showUpdate(){
						$.openUpdateLayer(this.updateResult);
					},
                    getData(indexIsIndex){
                        var that = this;
                        if(that.has_more && !that.loading){
                            that.loading = true;
                            $.ajax({
                                url:"/task/search?page="+ that.page +"&is_recommand=true&diffculty_level="+that.diffcultyLevel+"&jfm=" + that.jfm.toString() + "&sort=" + that.sort + (that.categoryId!=0?("&exclude=" + that.categoryId):""),
                                success:function(res){
                                    //console.log(JSON.stringify(res));
                                    that.has_more = res.data.has_more;
                                    if(that.page==1){
                                        that.list = (res.data.records);
                                    }else{
                                        that.list = that.list.concat(res.data.records);
                                    }
                                    if(res.data.has_more){
                                        that.page++;
                                    }
                                },
                                done:function(){
                                    that.loading = false;
                                    indexIsIndex && api.sendEvent({name: 'updatedByTabNav'});
                                }
                            });
                        }
                    },
                    resetPageParam(indexIsIndex){
                        var that = this;
                        that.page = 1;
                        that.has_more = true;
                        that.getData(indexIsIndex);
                    },
                    navTaskDetail(taskId) {
                        $.openUrl('common/commonTitle','task/detail',{title:'任务详情', topShare: true, taskId: taskId,allowEdit:true});
                    },
                    setItemDisabled: function(id, status){
                        var list = this.list;
                        for(var i=0; i<list.length; i++){
                            if(list[i].id == id){
                                this.$set(this.list[i], 'is_able_accept', status);
                                break;
                            }
                        }
                    },
                },
                mounted(){
					$.initJs(this);

                }
            });


            //下拉刷新
            $.pullDown({
                success:function(){
                    app.load = false;
                    app.getBasicInfo();
                    app.resetPageParam();
                }
            });

            //上拉加载
            api.addEventListener({
                name:'scrolltobottom',
                extra:{threshold:10}
            }, function(ret, err){
                app.getData();
            });

            //监听筛选回调事件
            api.addEventListener({
                name: 'filter'
            }, function(ret, err){
                if(ret){
                     app.list = null;
                     app.load = true;
                     app.sort = ret.value.sorts;
                     app.jfm = ret.value.canAccept;
                     app.categoryId = ret.value.categoryId;
                     app.resetPageParam();
                }
            });

            //请求网络
            api.addEventListener({
                name: 'navGetData'
            }, function(ret, err){
                //触发条件有两个：1.首次进本页面   2.mustGet必须请求
                if((ret && app.first && ret.value.navIndex==0) || (ret.value.navIndex==0 && ret.value.mustGet)){
                    app.first = false;
                    app.getBasicInfo();
                    app.getData();
                }
            });

			//有版本需要更新,此处需要显示一下
			api.addEventListener({
			    name: 'updateAleady'
			}, function(ret, err){
			    app.updateResult = ret.value.result;
			});


			//刷新一下首页基本信息(除开列表)
			api.addEventListener({
			    name: 'reshIndexBasic'
			}, function(ret, err){
                app.getBasicInfo(true);
                app.resetPageParam();
            });


            api.addEventListener({
			    name: 'updateHomeTaskItemIsAbleAccept'
			}, function(ret, err){
                if(!ret){
                    return false;
                }
                var taskId = ret.value.taskId;
                var status = ret.value.isAbleAccept;
			    app.setItemDisabled(taskId, status);
            });

            api.addEventListener({
			    name: 'updateShortVideo'
			}, function(ret, err){
                var taskId = ret.value.taskId;
                var videoTask = ret.value.videoTask;

                for(var i = 0; i < app.list.length; i++){
                    if(app.list[i].id == taskId){
                        if(videoTask.length==1){
                            app.list.splice(i,1,videoTask[0]);//将这条新数据替换下标为i这里
                        }else if(videoTask.length==2){
                            if(CONFIG.shortVideoId.indexOf(app.list[i-1].platform.id)!=-1){//上一条数据是抖音
                                app.list.splice(i-1,1,videoTask[0]);
                                app.list.splice(i,1,videoTask[1]);
                            }else{//下一条数据是抖音
                                app.list.splice(i,1,videoTask[0]);
                                app.list.splice(i+1,1,videoTask[1]);
                            }
                        }
                        break;
                    }
                }
            });

            // 刷新页面
            api.addEventListener({
			    name: 'updatePageByTabNav'
			}, function(ret, err){
                if(!ret){
                    return false;
                }
                app.navIndex = ret.value.navIndex;
                window.scrollTo(0,0);
                app.list = null;
				app.load = true;
                app.getBasicInfo();
                app.resetPageParam(true);
            });


			api.sendEvent({name: 'navInitSuccess'});

        }
    </script>
</body>
</html>
